/* -------------- Changes for both tablet and mobile -------------- */
/* -------------- Global -------------- */
/* --- Fonts --- */
/* Convert all fonts to default */
*, body,
input.ui-inputBox-bp,
.ui-div-inputPanel div.inputDiv input,
div.info p, .messageBody, .pullDownLabel p: first-child, .pullDownLabel p: last-child, .pullUpLabel p: first-child, .pullUpLabel p: last-child, .forLogon div div input.ui-logon-user, .forLogon div input.ui-logon2-input{
	font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
}

/* --- Text Indent for Image Replacement Text --- */
html .ui-header .ui-btn-text, html .ui-header .ui-back, html .ui-header .ui-btn-send, html .ui-header .ui-btn-menu, /* remove this line when css cleanup */
.ui-btn-text, .ui-back, .ui-btn-send, .ui-btn-menu{
	text-indent: -999em;
}

/* -------------- Structure -------------- */
body:not(.body-noheader){
	background-image: -webkit-gradient(linear, center bottom, center top, from(#121312), to(#242424));
	background-image: -webkit-linear-gradient(90deg, #121312, #242424);
	background-image: linear-gradient(0deg, #121312, #242424);
	background-repeat: repeat-x;
	-webkit-background-size: 1px 56px;
	background-size: 1px 56px;
}

body.body-forLogon .page.ui-login-bkgd{
	background-image: url("../images/background-application-portrait.jpg");
	-webkit-background-size: cover;
	background-size: cover;
}

/* Added for proposition background [start] */
body.body-forLogon .page.ui-login-bkgd-mas{
	background-image: url("../images/mass_portrait_S.jpg");
}
body.body-forLogon .page.ui-login-bkgd-adv{
	background-image: url("../images/mass_portrait_S.jpg");
}
body.body-forLogon .page.ui-login-bkgd-pre{
	background-image: url("../images/premier_portrait_S.jpg");
}
body.body-forLogon .page.ui-login-bkgd-pvb{
	background-image: url("../images/pb_portrait_S.jpg");
}
/* Added for proposition background [end] */

body.premier{
	background-image: -webkit-gradient(linear, center bottom, center top, from(#1e1955), to(#1e1955));
	background-image: -webkit-linear-gradient(90deg, #1e1955, #1e1955);
	background-image: linear-gradient(0deg, #1e1955, #1e1955);
}

/* -------------- Header -------------- */
/* --- size, position --- */
div.forLogon .ui-header, div.forLogon .ui-header.withoutBg, .premier .ui-header, .premier .ui-header.withoutBg, /* remove this line when css cleanup */
.ui-header, .ui-header.withoutBg{
	position: relative;
	top: 0;
	margin: 0;
	width: auto;
	height: 56px;
	background-image: -webkit-gradient(linear, center bottom, center top, from(#121312), to(#242424));
	background-image: -webkit-linear-gradient(90deg, #121312, #242424);
	background-image: linear-gradient(0deg, #121312, #242424);
	-webkit-background-size: auto;
	background-size: auto;
	z-index: 1000;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.premier .ui-header{
	background-image: -webkit-gradient(linear, center bottom, center top, from(#141138), to(#2c2950));
	background-image: -webkit-linear-gradient(90deg, #141138, #2c2950);
	background-image: linear-gradient(0deg, #141138, #2c2950);
}

.premier .ui-header.withoutBg, /* remove this line when css cleanup */
.ui-header.withoutBg, #errorWrapper .ui-header, .body-forLogon .ui-header{
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, -webkit-gradient(linear, center bottom, center top, from(#121312), to(#242424));
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, -webkit-linear-gradient(90deg, #121312, #242424);
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, linear-gradient(0deg, #121312, #242424);
}

.premier .ui-header.withoutBg, .premier #errorWrapper .ui-header{
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, -webkit-gradient(linear, center bottom, center top, from(#141138), to(#2c2950));
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, -webkit-linear-gradient(90deg, #141138, #2c2950);
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, linear-gradient(0deg, #141138, #2c2950);
}

.ui-header.absolute{
	width: 100%;
}

/* --- reset structure style --- */
.ui-head-parent{
	position: relative;
	top: 0;
	left: 0;
	width: auto;
}

/* --- icons --- */
/* It seems that ui-btn-icon using in header menu only */
html .ui-header .ui-btn-icon, html .ui-header .ui-btn-icon.withoutBg, html .ui-header .ui-btn-second, html .ui-header .ui-btn-right, html .ui-header .ui-btn-cancel-right, html .ui-header .ui-btn-next, html .ui-header .ui-btn-next, html .ui-header .ui-back, html .ui-header .ui-btn-refresh, html .ui-header .ui-btn-text, /* remove this line when css cleanup */
.ui-btn-icon, .ui-btn-icon.withoutBg, .ui-btn-second, .ui-btn-right, .ui-btn-cancel-right, .ui-btn-next, .ui-btn-help, .ui-back, .ui-btn-refresh, .ui-btn-text{
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	margin: 0;
	padding: 12px 16px;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	border: none;
	border-radius: 0;
	overflow: hidden;
	background: none;
	color: white;
	font-size: 11px;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	z-index: 1000;
	box-shadow: none;
	-webkit-background-size: auto;
	background-size: auto;
	text-shadow: none;
}

html .ui-header .ui-btn-right, html .ui-header .ui-btn-cancel-right, html .ui-header .ui-btn-help, html .ui-header .ui-left, html .ui-header .ui-btn-refresh, html .ui-header .ui-btn-right-inbox, html .ui-header .ui-btn-right-reply, html .ui-header .ui-btn-send, html .ui-header .ui-btn-global, html .ui-header .ui-btn-icon.withoutBg, /* remove this line when css cleanup */
.ui-btn-right, .ui-btn-cancel-right, .ui-btn-help, .ui-left, .ui-btn-refresh, .ui-btn-right-inbox, .ui-btn-right-reply, .ui-btn-send, .ui-btn-global, .ui-btn-icon.withoutBg, #errorWrapper .ui-btn-next{
	left: auto;
	right: 0;
}

html .ui-header .ui-btn-second, html .ui-header .toggle-group .up, /* remove this line when css cleanup */
.ui-btn-second, .toggle-group .up{
	left: auto;
	right: 64px;
}

html .ui-header .ui-btn-icon.withoutBg, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg, #errorWrapper .ui-btn-next{
	display: block;
	width: auto;
	overflow: visible;
	text-transform: uppercase;
}

html .ui-header .ui-btn-icon.withoutBg:nth-of-type(2), /* remove this line when css cleanup */
.ui-btn-icon.withoutBg:nth-of-type(2){
	right: 108px;
}

html .ui-header .ui-btn-icon:not(.withoutBg), html .ui-header .ui-btn-second, html .ui-header .ui-btn-right, html .ui-header .ui-btn-cancel-right, html .ui-header .ui-btn-next, html .ui-header .ui-btn-next, html .ui-header .ui-back, html .ui-header .ui-btn-refresh, html .ui-header .ui-btn-text, html .ui-header .ui-btn-icon.withoutBg::after, /* remove this line when css cleanup */
.ui-btn-icon:not(.withoutBg), .ui-btn-second, .ui-btn-right, .ui-btn-cancel-right, .ui-btn-next, .ui-btn-help, .ui-back, .ui-btn-refresh, .ui-btn-text, .ui-btn-icon.withoutBg::after, #errorWrapper .ui-btn-next::after{
	background: url('../images/android-sprite.png') no-repeat;
}

/* remove this selector when css cleanup */
.ui-btn-text-help, .ui-btn-text-ok, .ui-btn-text-cancel, .ui-btn-send{
	background: url('../images/android-sprite.png') no-repeat !important;
}

html .ui-header .ui-btn-icon.withoutBg::after, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg::after, #errorWrapper .ui-btn-next::after{
	content: " ";
	display: inline-block;
	margin-left: 12px;
	width: 32px;
	height: 32px;
	font-size: 0;
	vertical-align: middle;
}

html .ui-header .ui-btn-icon.withoutBg.ui-android-back::after, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg.ui-android-back::after, #errorWrapper .ui-btn-next.ui-android-back::after{
	background-position: -272px -80px;
}

html .ui-header .ui-btn-icon.withoutBg.ui-android-edit::after, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg.ui-android-edit::after{
	background-position: -208px -16px;
}

html .ui-header .ui-btn-icon.withoutBg.ui-android-ok::after, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg.ui-android-ok::after, #errorWrapper .ui-btn-next.ui-android-ok::after{
	background-position: -208px -80px;
}

html .ui-header .ui-btn-icon.withoutBg.ui-android-help::after, /* remove this line when css cleanup */
.ui-btn-icon.withoutBg.ui-android-help::after{
	background-position: -16px -80px;
}

html .ui-header .ui-btn-menu, html .ui-header .ui-btn-menu:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-menu, .ui-btn-menu:not(.withoutBg){
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, url('../images/android-sprite.png') no-repeat -468px -4px;
	-webkit-transition: background-position 0.5s;
	transition: background-position 0.5s;
}

html .menu-expanded .ui-header .ui-btn-menu, /* remove this line when css cleanup */
.menu-expanded .ui-btn-menu{
	background-position: 16px 12px, -464px -4px;
}

html .ui-header .ui-btn-text-logon, /* remove this line when css cleanup */
.ui-btn-text-logon{
	background-position: -320px -4px;
}

html .ui-header .ui-back, html .ui-header:not(.withoutBg) .ui-android-back:nth-of-type(1), html .ui-header:not(.withoutBg) .ui-btn-next:nth-of-type(1), /* remove this line when css cleanup */
.ui-back, .ui-header:not(.withoutBg) .ui-android-back:nth-of-type(1), .ui-header:not(.withoutBg) .ui-btn-next:nth-of-type(1){
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, url('../images/android-sprite.png') no-repeat -464px -68px !important; /* remove this line when css cleanup */
	background: url('../images/hsbc-icon.png') no-repeat 16px 12px, url('../images/android-sprite.png') no-repeat -464px -68px;
	text-indent: -999em;
	-webkit-transition: background-position 0.5s;
	transition: background-position 0.5s;
}

/* special handler for errorWrapper icons */
#errorWrapper .ui-btn-next:nth-of-type(1){
	background: none !important; /* remove this line when css cleanup */
	background: none;
	text-indent: 0;
}

html .ui-header .ui-btn-add:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-add:not(.withoutBg){
	background-position: -128px -68px;
}

html .ui-header .ui-btn-refresh:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-refresh:not(.withoutBg){
	background-position: -128px -4px;
}

html .ui-header .ui-btn-search:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-search:not(.withoutBg){
	background-position: -64px -68px;
}

html .ui-header .ui-btn-icon.ui-btn-right-inbox:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-right-inbox:not(.withoutBg){
	background-position: -192px -4px;
}

html .ui-header .ui-btn-right-reply:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-right-reply:not(.withoutBg){
	background-position: -192px -196px;
}

html .ui-header .ui-btn-send:not(.withoutBg), /* remove this line when css cleanup */
.ui-btn-send:not(.withoutBg){
	background-position: -320px -196px !important; /* remove this line when css cleanup */
	background-position: -320px -196px;
}

html .ui-header .ui-btn-right-details:not(.withoutBg), html .ui-header .ui-btn-text-risk_profile, /* remove this line when css cleanup */
.ui-btn-right-details:not(.withoutBg), .ui-btn-text-risk_profile{
	background-position: -256px -196px;
}

.ui-btn-text-help{
	background-position: 0 -68px !important; /* remove this line when css cleanup */
	background-position: 0 -68px;
}

.ui-btn-text-ok{
	background-position: -192px -68px !important; /* remove this line when css cleanup */
	background-position: -192px -68px;
}

.ui-btn-text-cancel{
	background-position: -256px -68px !important; /* remove this line when css cleanup */
	background-position: -256px -68px;
}

/* --- title --- */
.ui-header h1, .ui-header.withoutBg h1{
	margin-left: 64px;
	 /* margin-right: 128px; */
	overflow: hidden;
	background: none;
	color: white;
	font-size: 1.2em;
	line-height: 56px !important; /* remove this line when css cleanup */
	line-height: 56px;
	text-align: left;
	/* text-overflow: ellipsis; */
	text-shadow: none;
	white-space: nowrap;
}

.ui-header.withoutBg h1{
	/* margin-right: 216px; */
}

.ui-header h1.longwords{
	padding-left: 0;
}

.ui-header h1 .title-function{
	display: inline;
}

.ui-header h1 .title-apps{
	display: none;
}

/* special handler for hard-corded css */
/* remove this selector when css cleanup */	
#notes_riskProfile{
	width: 32px !important;
}

/* special handler for prelogon RewardCash Detail Content */
.body-prelogon #productDetail_content{
	margin-left: auto;
	margin-right: auto;
	max-width: 704px;
}

.body-prelogon #productDetail_content .ui-list-item{
	-webkit-box-pack: justify;
}

.body-prelogon #productDetail_content .ui-list-item .ui-right-panel{
	max-width: 342px;
}

/* -------------- Main -------------- */

#wrapper, #wrapper1, #wrapper2, .ui-wrapper, .ui-content.forPremier{
	margin-top: 56px;
	padding-top :0;
}

/* Please check iFunction.prototype._init in dove.js for some cases applied iScroll which needs margin to zero for both landscape and portrait */

#wrapper, #wrapper1, #wrapper2, .wrapper, .ui-wrapper{
	top: 0;
	right: 0;
	width: auto;
}

.ui-float-box{
	left: 0;
	right: 0;
	width: auto;
}

.ui-actionpanel::before{
	top: -2000px;
}

html .bb-amount-combo input::-webkit-input-placeholder{
	direction: rtl;
	font-size: 14px; /* Font size must be the same as the input element to prevent bug */
}

@media (orientation: portrait){
	/* -------------- Header -------------- */
	html .menu-expanded .ui-header .ui-btn-icon:not(.withoutBg), html .menu-expanded .ui-header .ui-btn-second, html .menu-expanded .ui-header .ui-btn-right, html .menu-expanded .ui-header .ui-btn-next, html .menu-expanded .ui-header .ui-btn-next, html .menu-expanded .ui-header .ui-back, html .menu-expanded .ui-header .ui-btn-refresh, html .menu-expanded .ui-header .ui-btn-text, html .menu-expanded .ui-header .ui-btn-icon.withoutBg::after, /* remove this line when css cleanup */
	.menu-expanded .ui-btn-icon:not(.withoutBg), .menu-expanded .ui-btn-second, .menu-expanded .ui-btn-right, .menu-expanded .ui-btn-next, .menu-expanded .ui-btn-help, .menu-expanded .ui-back, .menu-expanded .ui-btn-refresh, .menu-expanded .ui-btn-text, .menu-expanded .ui-btn-icon.withoutBg::after, .menu-expanded #errorWrapper .ui-btn-next::after{
		display: none;
	}

	html .menu-expanded .ui-header .ui-btn-menu, html .menu-expanded .ui-header .ui-btn-menu:not(.withoutBg), /* remove this line when css cleanup */
	.menu-expanded .ui-btn-menu, .ui-btn-menu:not(.withoutBg){
		display: block;
	}
	
	.menu-expanded .ui-header h1 .title-function{
		display: none;
	}
	
	.menu-expanded .ui-header h1 .title-apps{
		display: inline;
	}
}

/*
 * There is a bug in Android Browser that not support device-width in CSS
 * use width / height instead
 * Ref: https://bugs.webkit.org/show_bug.cgi?id=106460
 * As width / height is refer to innerWidth / innerHeight,
 * We need to concern the height of notification bar
 * Notification bar height: 25px (Logical Pixel)
 * Use 30px for safty
 */
/* @media (orientation: landscape) and (min-width: 640px) and (min-height: 450px),
(orientation: portrait) and (min-width: 480px) and (min-height: 610px){*/
@media (min-width: 640px), (max-aspect-ratio: 1199/1000) and (min-width: 480px){
	/* -------------- Global -------------- */
	
	/* -------------- Structure -------------- */
	body.body-forLogon .page, /* remove this line when css cleanup */
	.page{
		left: 0;
		right: 0;
		width: auto;
		padding-left: 48px;
		padding-right: 48px;
	}
	
	body.body-forLogon .page.forLogon{
		padding-left: 96px;
		padding-right: 96px;
	}
	
	body.body-forLogon .page.ui-login-bkgd{
		background-image: url("../images/background-application-landscape.jpg");
	}
	/* Added for proposition background [start] */
	body.body-forLogon .page.ui-login-bkgd-mas{
		background-image: url("../images/mass_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-adv{
		background-image: url("../images/mass_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pre{
		background-image: url("../images/premier_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pvb{
		background-image: url("../images/pb_landscape_T.jpg");
	}
	/* Added for proposition background [end] */

	.ui-content{
		margin-left: 0;
		margin-right: 0;
		width: auto;
	}
	
	/* -------------- Header -------------- */
	.premier .ui-header, .premier .ui-header.withoutBg, /* remove this line when css cleanup */
	body.body-forLogon .ui-header, body-forLogon .ui-header.withoutBg, .ui-header, .ui-header.withoutBg{
		margin-left: -48px;
		margin-right: -48px;
	}
	
	body.body-forLogon .page.forLogon .ui-header{
		margin-left: -96px;
		margin-right: -96px;
	}
	
	.ui-header.absolute{
		width: 100%;
	}
	
	/* -------------- Main -------------- */
	/* As position of #wrapper is relative to body , we need to apply margin. We cannot use 'left', as it will be overrided by JS */
	#wrapper, #wrapper1, #wrapper2, .wrapper, .ui-wrapper, .ui-float-box{
		margin-left: 48px;
		margin-right: 48px;
	}
	
	.ui-actionpanel{
		margin-left: 0;
		margin-right: 0;
		padding-left: 48px;
		padding-right: 48px;
	}

	/* remove this selector when css cleanup */	
	.ui-actionpanel .ml-0, .ui-actionpanel .mr-0{
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	/* --- button size reduce --- */
	.ui-float-box > .ui-btn-enter, #atmIndex_delete, .ui-btn-enter.newmargin, /* remove this line when css cleanup */
	.ui-btn-enter, .ui-btn-enter.login, .forLogon div a.dualPassword{
		margin-left: auto;
		margin-right: auto;
		width: 60%;
	}
	
	.btn-group-two{
		margin-left: auto;
		margin-right: auto;
		width: 60%;
	}
	
	/* --- align margin and padding --- */
	 .ui-form, .error-panel{
		 margin-left: 0;
		 margin-right: 0;
	 }
	.tab-section, .ui-dropdown-box, .scopebar{
		padding-left: 0;
		padding-right: 0;
	}
	
	/* remove logon page -webkit-box, let Not Registered closer to Username box */
	#logonUsername.page{
		display:block;
	}
	
	body.body-forLogon .contentPanel{
		margin-left: 0;
		margin-right: 0;
	}
	
	.forLogon .ui-btn-enter, .forLogon .ui-btn-enter.login, .forLogon div a.dualPassword{
		width: 60%;
	}
	
	/* remove the box-shadow left and right blur shadow, before this modify, left right shadow cannot see under phone, but can be see under tablet*/
	.scopebar, .ui-link-header, .tab-section, .ui-dropdown-box, .ui-userInfo, div.ui-inputUserId, ul.savedTransfer-list { 
		box-shadow: 0 3px 2px -2px rgba(0,0,0,0.4); 
	}
}

/* -------------- override for screen is narrow -------------- */
@media (max-width: 479px){
	html .ui-header .ui-btn-icon.withoutBg, /* remove this line when css cleanup */
	.ui-btn-icon.withoutBg{
		padding-left: 6px;
		padding-right: 6px;
	}
	
	html .ui-header .ui-btn-icon.withoutBg::after, /* remove this line when css cleanup */
	.ui-btn-icon.withoutBg::after, #errorWrapper .ui-btn-next::after{
		margin-left: 6px;
	}
	
	html .ui-header .ui-btn-icon.withoutBg:nth-of-type(2), .ui-btn-icon.withoutBg:nth-of-type(2){
		right: 102px;
	}
	
	.ui-header.withoutBg h1{
		/* margin-right: 204px; */
	}
}

/* -------------- override for landscape -------------- */
/* @media (orientation: landscape) and (min-width: 640px) and (min-height: 450px){ */
@media (min-aspect-ratio: 6/5) and (min-width: 640px){ /* webview size will change when keyboard show */
   

	/* -------------- Structure -------------- */
	.page{
		padding-left: 368px;
	}

	/* reset "body.body-prelogon" */
	body.body-forLogon .page, body.body-prelogon .page{
		padding-left: 96px;
		padding-right: 96px;
	}
	
	body.body-forLogon .page.forLogon{
		padding-left: 144px;
		padding-right: 144px;
	}
	
	/* -------------- Header -------------- */
	.premier .ui-header, .premier .ui-header.withoutBg,/* remove this line when css cleanup */
	.ui-header, .ui-header.withoutBg{
		margin-left: -368px;
	}
	
	body.body-forLogon .ui-header, body.body-prelogon .ui-header{
		margin-left: -96px;
		margin-right: -96px;
	}
	
	body.body-forLogon .page.forLogon .ui-header{
		margin-left: -144px;
		margin-right: -144px;
	}
	
	html .ui-header .ui-btn-menu, html .ui-header .ui-btn-menu:not(.withoutBg), /* remove this line when css cleanup */
	.ui-btn-menu, .ui-btn-menu:not(.withoutBg){
		background-image: url('../images/hsbc-icon.png');
	}
	
	/* -------------- Main -------------- */
	#wrapper, #wrapper1, #wrapper2, .ui-wrapper, .wrapper, .ui-float-box{
		margin-left: 368px;
	}
	
	body.body-prelogon #wrapper, body.body-prelogon #wrapper1, body.body-prelogon #wrapper2, body.body-prelogon .ui-wrapper, body.body-prelogon .ui-float-box{
		margin-left: 96px;
		margin-right: 96px;
	}
	
	.ui-actionpanel{
		padding-left: 368px;
		padding-right: 48px;
	}
	
	body.body-prelogon .ui-actionpanel{
		padding-left: 96px;
		padding-right: 96px;
	}
    
	/*----------------------zh beging---------------------------*/
	/*
	#logonUsername,#logonCAM40,#logonCAM30,#logonCAM20,#logonIntegration,#logon_acceptCam30Tc,#logon_acceptCam40Tc,#logon_error,#intgLogon_help
	,#orderHTActivate,#orderSTActivate,#logonRegister,#prcPostalPrompt,#orderHTLogon,#orderSTLogon,#logon_actvReminder,#logonRegisterSOTP_help
	,#logonActivateSOTP,#logonRegisterSOTP,#logonActivateSOTP_help,#logon_findMore,#logon_switchNewInfo1,#logon_switchNewInfo2,#logon_deactHelp
	,#logon_switchNewInfo1_help,#logon_switchNewInfo2_help,#logon_switchNew_CAM40_help,#logon_callDeactivate,#logon_callDeactivate_help
	,#logon_noMemInfo_help,#logonIntegration4SOTP,#errorPage,#errorWrapper,#commonError,#stepUp,#reAuth,#loadingMask,#logon_genOTP_help{
	   left: 0 !important;
	   right: 0 !important;
	   width: auto !important;
	   padding-left: 144px !important;
	   padding-right: 144px !important;
	}

	#logonUsername  .ui-header,#logonCAM40 .ui-header,#logonCAM30 .ui-header,#logonCAM20 .ui-header,#logonIntegration .ui-header,#logon_acceptCam30Tc .ui-header
	,#logon_acceptCam40Tc .ui-header,#logon_error .ui-header,#intgLogon_help .ui-header,#orderHTActivate .ui-header,#orderSTActivate .ui-header,#logonRegister .ui-header
	,#prcPostalPrompt .ui-header,#orderHTLogon .ui-header,#orderSTLogon .ui-header,#logon_actvReminder .ui-header,#logonRegisterSOTP_help .ui-header,#logonActivateSOTP
	.ui-header,#logonRegisterSOTP .ui-header,#logonActivateSOTP_help .ui-header,#logon_findMore .ui-header,#logon_switchNewInfo1 .ui-header,#logon_switchNewInfo2 .ui-header
	,#logon_deactHelp .ui-header,#logon_switchNewInfo1_help .ui-header,#logon_switchNewInfo2_help .ui-header,#logon_switchNew_CAM40_help .ui-header,#logon_callDeactivate
	.ui-header,#logon_callDeactivate_help .ui-header,#logon_noMemInfo_help .ui-header,#logonIntegration4SOTP .ui-header,#errorPage .ui-header,#errorWrapper .ui-header
	,#commonError .ui-header,#stepUp .ui-header,#reAuth .ui-header,#loadingMask .ui-header,#logon_genOTP_help .ui-header{
		margin-left: -144px !important;
		margin-right: -144px !important;
	}
	*/
    
	/* remove logon page -webkit-box, let Not Registered closer to Username box*/
	#logonUsername.page{
		display:block;
	}
	/*----------------------zh end-----------------------------*/
}

/* -------------- 2x override -------------- */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-height: 640px){
	body.body-forLogon .page.ui-login-bkgd{
		background-image: url("../images/background-application-portrait@2x.jpg");
	}
	/* Added for proposition background [start] */
	body.body-forLogon .page.ui-login-bkgd-mas{
		background-image: url("../images/mass_portrait_S.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-adv{
		background-image: url("../images/mass_portrait_S.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pre{
		background-image: url("../images/premier_portrait_S.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pvb{
		background-image: url("../images/pb_portrait_S.jpg");
	}
	/* Added for proposition background [end] */
}


@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
	html .ui-header .ui-btn-icon:not(.withoutBg), html .ui-header .ui-btn-second, html .ui-header .ui-btn-right, html .ui-header .ui-btn-cancel-right, html .ui-header .ui-btn-next, html .ui-header .ui-btn-next, html .ui-header .ui-back, html .ui-header .ui-btn-refresh, html .ui-header .ui-btn-text, html .ui-header .ui-btn-icon.withoutBg::after, /* remove this line when css cleanup */
	.ui-btn-icon:not(.withoutBg), .ui-btn-second, .ui-btn-right, .ui-btn-cancel-right, .ui-btn-next, .ui-btn-help, .ui-back, .ui-btn-refresh, .ui-btn-text, .ui-btn-icon.withoutBg::after, #errorWrapper .ui-btn-next::after{
		background-image: url('../images/android-sprite@2x.png');
		-webkit-background-size: 512px 512px;
		background-size: 512px 512px;
	}
		
	/* remove this selector when css cleanup */
	.ui-btn-text-help, .ui-btn-text-ok, .ui-btn-text-cencel, .ui-btn-send{
		background-image: url('../images/android-sprite@2x.png') !important;
		-webkit-background-size: 512px 512px;
		background-size: 512px 512px;
	}
	
	/* background with hsbc logo */
	.premier .ui-header.withoutBg, /* remove this line when css cleanup */
	.ui-header.withoutBg, #errorWrapper .ui-header, .body-forLogon .ui-header{
		background-image: url('../images/hsbc-icon@2x.png'), -webkit-gradient(linear, center bottom, center top, from(#121312), to(#242424));
		background-image: url('../images/hsbc-icon@2x.png'), -webkit-linear-gradient(90deg, #121312, #242424);
		background-image: url('../images/hsbc-icon@2x.png'), linear-gradient(0deg, #121312, #242424);
		-webkit-background-size: 32px 32px, auto auto;
		background-size: 32px 32px, auto auto;
	}
	
	/* background with hsbc logo for premier */
	.premier .ui-header.withoutBg, .premier #errorWrapper .ui-header{
		background-image: url('../images/hsbc-icon@2x.png'), -webkit-gradient(linear, center bottom, center top, from(#141138), to(#2c2950));
		background-image: url('../images/hsbc-icon@2x.png'), -webkit-linear-gradient(90deg, #141138, #2c2950);
		background-image: url('../images/hsbc-icon@2x.png'), linear-gradient(0deg, #141138, #2c2950);
	}
	
	/* action bar logo - menu */
	html .ui-header .ui-btn-menu, html .ui-header .ui-btn-menu:not(.withoutBg), /* remove this line when css cleanup */
	.ui-btn-menu, .ui-btn-menu:not(.withoutBg){
		background-image: url('../images/hsbc-icon@2x.png'), url('../images/android-sprite@2x.png');
		-webkit-background-size: 32px 32px, 512px 512px;
		background-size: 32px 32px, 512px 512px;
	}
	
	/* action bar logo - back */
	html .ui-header .ui-back, html .ui-header:not(.withoutBg) .ui-android-back:nth-of-type(1), html .ui-header:not(.withoutBg) .ui-btn-next:nth-of-type(1), /* remove this line when css cleanup */
	.ui-back, .ui-header:not(.withoutBg) .ui-android-back:nth-of-type(1), .ui-header:not(.withoutBg) .ui-btn-next:nth-of-type(1){
		background-image: url('../images/hsbc-icon@2x.png'), url('../images/android-sprite@2x.png') !important; /* remove this line when css cleanup */
		background-image: url('../images/hsbc-icon@2x.png'), url('../images/android-sprite@2x.png');
		-webkit-background-size: 32px 32px, 512px 512px !important; /* remove this line when css cleanup */
		-webkit-background-size: 32px 32px, 512px 512px;
		background-size: 32px 32px, 512px 512px !important; /* remove this line when css cleanup */
		background-size: 32px 32px, 512px 512px;
	}
	
	/* special handler for errorWrapper icons */
	#errorWrapper .ui-btn-next:nth-of-type(1){
		background: none !important; /* remove this line when css cleanup */
		background: none;
	}
}

@media (min-aspect-ratio: 6/5) and (-webkit-min-device-pixel-ratio: 1.5),
(min-aspect-ratio: 6/5) and (min-width: 640px) {
	body.body-forLogon .page.ui-login-bkgd{
		background-image: url("../images/background-application-landscape@2x.jpg");
	}
	/* Added for proposition background [start] */
	body.body-forLogon .page.ui-login-bkgd-mas{
		background-image: url("../images/mass_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-adv{
		background-image: url("../images/mass_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pre{
		background-image: url("../images/premier_landscape_T.jpg");
	}
	body.body-forLogon .page.ui-login-bkgd-pvb{
		background-image: url("../images/pb_landscape_T.jpg");
	}
	/* Added for proposition background [end] */
}

/* @media (orientation: landscape) and (min-width: 640px) and (min-height: 450px) and (-webkit-min-device-pixel-ratio: 1.5),
(orientation: landscape) and (min-width: 640px) and (min-height: 450px) and (min-device-pixel-ratio: 1.5){ */
@media (min-aspect-ratio: 6/5) and (min-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5),
(min-aspect-ratio: 6/5) and (min-width: 640px) and (min-device-pixel-ratio: 1.5){
	/* action bar logo - menu for landscape */
	html .ui-header .ui-btn-menu, html .ui-header .ui-btn-menu:not(.withoutBg), /* remove this line when css cleanup */
	.ui-btn-menu, .ui-btn-menu:not(.withoutBg){
		background-image: url('../images/hsbc-icon@2x.png');
	}
}

/*FXOW css begin*/
@media (min-width: 481px){
	.span-width{
		width:115px !important;
	}
	.span-float{
		margin-left:50px !important;
		float:none !important;
	}	
}
.list-font12{
	font-size: 12px !important;
}
.font-white{
	color:white !important;
}
.margin-left0{
	margin-left:0px !important;
}
.content-top{
	padding-top:15px !important;
}
.ui-header-absolute {
	width:100% !important;
}
/*FXOW css end*/